<template>
    <a-layout class="layout" id="components-layout-demo-custom-trigger">
        <a-layout-header class="header-layout">
            <self-header></self-header>
        </a-layout-header>
        <a-layout>
            <a-layout-sider
                v-model="collapsed"
                :trigger="null"
                collapsible
                class="custom-sider"
                style="background: #fff; min-width: 220px; width: 220px"
            >
                <!-- <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        /> -->
                <self-slider></self-slider>
            </a-layout-sider>
            <a-layout>
                <a-layout-content class="content-layout">
                    <breadcrumb :title="$route.meta.title" v-if="showBreadcrumb"></breadcrumb>
                    <div class="content-box h100">
                        <areaTree
                            v-if="showTree"
                            :key="$route.name"
                            :expandedTreeNodeKeys.sync="expandedTreeNodeKeys"
                            :areaData.sync="areaData"
                            @selectTreeItem="selectTreeItem"
                            ref="tree"
                            :disabledSelectingFunction="disabledTreeSelectingFunction"
                        />
                        <div :style="contentCss">
                            <keep-alive :include="KEEPALIVE">
                                <router-view></router-view>
                            </keep-alive>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>
<script>
import SelfHeader from './header'
import SelfSlider from './slider'
import Clock from '../icons/svg/clock.svg'
import Alarm from '../icons/svg/alarm.svg'
import Down from '../icons/svg/down.svg'
import moment from 'moment'
import AreaTree from '../components/area/areaTree'
import { mapMutations } from 'vuex'
import Breadcrumb from './breadcrumb'
import { fieldApi } from '../common/api/common'
import { constant } from '@/common/config'
const { JOB, DEPARTMENT, KEEPALIVE, COALLIBRARY, ENTERPRISE } = constant
export default {
    components: {
        Breadcrumb,
        AreaTree,
        SelfHeader,
        SelfSlider,
    },
    data() {
        return {
            KEEPALIVE,
            // tree
            JOB,
            DEPARTMENT,
            areaData: [],
            expandedTreeNodeKeys: [],
            showTree: true,
            showBreadcrumb: true,
            // tree
            showMonitor: true,
            Clock,
            Alarm,
            Down,
            currentTime: moment().format('YYYY年MM月DD日  dddd  HH:mm:ss'),
            collapsed: false,
        }
    },
    mounted() {
        let routerName = this.$route.name
        this.showMonitor = !(routerName == 'index')
        this._timeTimer = setInterval(() => {
            this.currentTime = moment().format('YYYY年MM月DD日  dddd  HH:mm:ss')
        }, 1000)
        this.init()
    },
    computed: {
        hiddenTypes() {
            return this.$route.name === 'template' ||
                this.$route.name === 'process' ||
                this.$route.name === 'duty' ||
                this.$route.name === 'field' ||
                this.$route.name === 'matterManage'
                ? [JOB]
                : this.$route.name === 'companyArchives' ||
                  this.$route.name === 'alert' ||
                  this.$route.name === 'companyCode'
                ? [JOB, DEPARTMENT]
                : []
        },
        alarmList: {
            get() {
                return this.$store.state.alarmList
            },
            set(val) {
                this.$store.state.alarmList = val
            },
        },
        contentCss() {
            return this.showTree
                ? {
                      width: '80%',
                      flex: 'none',
                      height: '100%',
                  }
                : { width: '100%', height: '100%' }
        },
    },
    methods: {
        ...mapMutations(['setFieldList']),

        selectTreeItem(currSelectedTreeNode) {
            if (this.$route.name === 'companyArchives') {
                console.log('触发')
                this.RAISE_EVT(this.EVT_ENUM.SELECT_TREE_ITEM, {
                    currSelectedTreeNode,
                    expand: (expandedTreeNodeKeys, scrollId) => {
                        console.log('callback')
                        this.expandedTreeNodeKeys = expandedTreeNodeKeys
                        scrollId && this.$refs.tree.scrollIntoView(scrollId)
                    },
                })
            }
        },
        disabledTreeSelectingFunction(type) {
            if (this.$route.name === 'companyArchives') {
                return type === ENTERPRISE
            } else {
                return false
            }
        },
        init() {},
        goMonitor() {
            this.$router.push({ name: 'index' })
        },
    },
    beforeDestroy() {
        console.log('页面销毁')
        clearInterval(this._timeTimer)
        // clearInterval(this._alarmTimer)
    },
    watch: {
        $route: {
            immediate: true,
            handler: function (newValue, oldValue) {
                this.showMonitor = !(newValue && newValue.name == 'index')
                this.showBreadcrumb = !(newValue && newValue.name == 'index')
                newValue.name === 'home' ? (this.showBreadcrumb = false) : ''
                newValue.name === 'home' ? (this.showBreadcrumb = false) : ''
                if (newValue) {
                    switch (newValue.name) {
                        case 'users':
                        case 'duty':
                        case 'template':
                        case 'code':
                        case 'process':
                        case 'field':
                        case 'alert':
                        case 'companyArchives':
                        case 'matterManage':
                        case 'companyCode':
                        case 'dutyPerformance':
                            this.showTree = true
                            break
                        default:
                            this.showTree = false
                            break
                    }
                }
            },
        },
    },
}
</script>
<style lang="scss" scoped>
@keyframes blink {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}
.content-box {
    overflow: auto hidden;
    padding: 0 20px 20px 20px;
    display: flex;
}
.warning {
    color: red !important;
    animation: blink 1s linear infinite;
}

.seamless-warp {
    overflow: hidden;
    width: 570px;
    height: 25px;
    line-height: 25px;
    ul.item {
        width: 600px;
        li {
            float: left;
            margin-right: 10px;
        }
    }
}

.monitor-header {
    width: 100%;
    height: 70px;
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 25px;
    margin-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .have-alarm {
        border: none !important;
        background-color: #fff2f4;
        color: #ff0037 !important;
    }
    .monitor-alarm {
        width: 660px;
        height: 40px;
        border: 1px solid #d0d2d3;
        border-radius: 10px;
        margin-left: 4px;
        font-size: 14px;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        text-align: left;
        color: #2b3b45;
        letter-spacing: 1px;
        i {
            opacity: 0.5;
        }
    }
    .current-time {
        width: 300px;
        height: 40px;
        background: #f5f5f7;
        border-radius: 10px;
        margin-left: 20px;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #2b3b45;
        letter-spacing: 1px;
        margin-right: 24px;
    }
    .alarm-number {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 22px;
        font-family: BebasNeue;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 27px;
        background: #ff0037;
    }
    .monitor-link {
        width: 36px;
        height: 36px;
        background: #0084ff;
        border-radius: 6px;
        color: white;
        font-size: 20px;
    }
}

.content-layout {
    min-height: 280px;
    padding-left: 1px;
    display: flex;
    flex-direction: column;
    > div {
        width: 100%;
    }
}

.layout {
    width: 100%;
    height: 100%;
    .header-layout {
        background: $color-primary;
        padding: 0 50px 0 34px;
        height: 70px;
    }
}

#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    padding: 10px 30px 0;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}
</style>
